<template>
    <div>
      <h1>修改页面</h1>
      <table class="table table-bordered">        
          <tbody>
            <tr>
              <td align="right">账号</td>
              <td><input type="text" v-model="ojbInfo.Name" /></td>
            </tr>
            <tr>
              <td align="right">密码</td>
              <td><input type="password" v-model="ojbInfo.Pwd" /></td>
            </tr>
            <tr>
              <td align="right">确认密码</td>
              <td><input type="password" v-model="Okpwd" /></td>
            </tr>
            <tr>
              <td align="right">手机号</td>
              <td>
                <input type="text" v-model="ojbInfo.Phone" maxlength="11" />
              </td>
            </tr>
            <tr>
              <td align="right">身份证</td>
              <td><input type="text" v-model="ojbInfo.Card" maxlength="18" /></td>
            </tr>
            <tr>
              <td align="right">生日</td>
              <td><input type="date" v-model="ojbInfo.Birthday.substring" /></td>
            </tr>
            <tr>
              <td align="right">性别</td>
              <td>
                <input
                  type="radio"
                  name="sex"
                  :value="1"
                  v-model="ojbInfo.Sex"
                />男
                <input
                  type="radio"
                  name="sex"
                  :value="0"
                  v-model="ojbInfo.Sex"
                />女
              </td>
            </tr>
            <tr>
              <td align="right">积分</td>
              <td><input type="text" v-model="ojbInfo.Points" /></td>
            </tr>
            <tr>
              <td align="right">余额</td>
              <td><input type="text" v-model="ojbInfo.Money" /></td>
            </tr>
            <tr>
              <td align="right">会员等级</td>
              <td>
                <select v-model="ojbInfo.LId">    
                  <option value="">请选择</option>
                  <option v-for="item in ojbLevellist" :value="item.Id" >{{ item.LName }}</option>
                </select>
              </td>
            </tr>
            <tr>
              <td align="right"></td>
              <td><input type="button" value="修改" @click="ok"/></td>
            </tr>
          </tbody>    
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from "axios";
  import { ref, reactive, onMounted } from "vue";
  import { useRouter,useRoute } from "vue-router";
  
  //路由器对象 跳转并且传参
  const router = useRouter();
  const Route = useRoute();


  //页面直接加载获取等级名称(下拉表)
  onMounted(() => {
    GetLevelname();
    FanTian();
  });

  //接受会员等级数据
  let ojbLevellist: any = ref({});
  
  //获取会员等级列表
  const GetLevelname = () => {
    axios({
      url: "/api/Member/LevelList",
      method: "get",
    })
      .then((res) => {
        console.log(res);
        ojbLevellist.value = res.data;
      })
      .catch((arr) => {});
  };
  
  //向后端传递的数据
  let ojbInfo = ref({
    Id: 0,
    Name: "",
    Phone: "",
    Card: "",
    Birthday: "",
    Sex: 0,
    State: 0,
    Pwd: "",
    Money: 0,
    Points: 0,
    IsDeleted: true,
    LId: 0
    
  });

   //反填
   const FanTian =()=>{
    //从接口获取数据
    axios({
        url:'https://localhost:7142/api/Member/FanTianMember',
        method:'get',
        params:{
            id:24
        }
    })

    .then(res=>{
        console.log(res)
        alert('反填成功')
        ojbInfo.value = res.data
        Okpwd.value = res.data.Pwd 
    }).catch(arr=>{
        alert('反填失败')
    })

  }

  //确认密码
  let Okpwd = ref("");
  
  //判断
  // const oo = ()=>{
  //    //1.验证非空+有效性
  //    if (ojbInfo.Name == "") {
  //     alert("账号不可为空");
  //     return;
  //   }
  //   if (ojbInfo.Pwd == "") {
  //     alert("密码不可为空");
  //     return;
  //   }
  //   if (Okpwd.value == "") {
  //     alert("确认密码不可为空");
  //     return;
  //   }
  //   if (ojbInfo.Pwd != Okpwd.value) {
  //     alert("两次密码不一致");
  //     return;
  //   }
  //   if (ojbInfo.Phone == "") {
  //     alert("手机号不可为空");
  //     return;
  //   }
  //   //是否是手机号
  //   let reg = /^1[3-9]\d{9}$/;
  //   if (reg.test(ojbInfo.Phone) == false) {
  //     alert("手机号不合法");
  //   }
  //   if (ojbInfo.Card == "") {
  //     alert("身份证不可为空");
  //     return;
  //   }
  //   //   let reg1 = /^\d{17}[0-9Xx]$/;
  //   //   if(reg1.test(ojbInfo.Card)){
  //   //     alert('身份证不合法');
  //   //     return;
  //   //   }
  
  //   if (ojbInfo.Birthday == "") {
  //     alert("生日不可为空");
  //     return;
  //   }
  //   if (ojbInfo.Points == "") {
  //     alert("积分不可为空");
  //     return;
  //   }
  //   //IsNan判断是否数字 如果是为false 如果否为true
  
  //   if (isNaN(Number(ojbInfo.Points)) == true) {
  //     alert("积分只能为数字");
  //     return;
  //   }
  
  //   if (ojbInfo.Money == "") {
  //     alert("余额不可为空");
  //   }
  
  //   if (isNaN(Number(ojbInfo.Money)) == true) {
  //     alert("余额只能为数字");
  //     return;
  //   }
  
  // }
  
  //函数-------
  //增加数据
  const ok = () => {
    //1.验证非空+有效性
    if (ojbInfo.value.Name == "") {
      alert("账号不可为空");
      return;
    }
    if (ojbInfo.value.Pwd == "") {
      alert("密码不可为空");
      return;
    }
    if (Okpwd.value == "") {
      alert("确认密码不可为空");
      return;
    }
    if (ojbInfo.value.Pwd != Okpwd.value) {
      alert("两次密码不一致");
      return;
    }
    if (ojbInfo.value.Phone == "") {
      alert("手机号不可为空");
      return;
    }
    //是否是手机号
    let reg = /^1[3-9]\d{9}$/;
    if (reg.test(ojbInfo.value.Phone) == false) {
      alert("手机号不合法");
      return;
    }
    if (ojbInfo.value.Card == "") {
      alert("身份证不可为空");
      return;
    }
    //   let reg1 = /^\d{17}[0-9Xx]$/;
    //   if(reg1.test(ojbInfo.Card)){
    //     alert('身份证不合法');
    //     return;
    //   }
  
    if (ojbInfo.value.Birthday == "") {
      alert("生日不可为空");
      return;
    }
    // if (ojbInfo.value.Points == "") {
    //   alert("积分不可为空");
    //   return;
    // }
    // //IsNan判断是否数字 如果是为false 如果否为true
  
    // if (isNaN(Number(ojbInfo.value.Points)) == true) {
    //   alert("积分只能为数字");
    //   return;
    // }
  
    // if (ojbInfo.value.Money == "") {
    //   alert("余额不可为空");
    // }
  
    // if (isNaN(Number(ojbInfo.Money)) == true) {
    //   alert("余额只能为数字");
    //   return;
    // }
  
    //2.发送网络请求将数据添加到数据库
  
    axios({
      url: "/api/Member/MemberAdd",
      method:"POST",
      data: ojbInfo
    })
      //发送网络请求成功时调用的函数 相当于Ajax success
      .then((res) => {
        console.log(res);
        if (res.data == -1) {
          alert("手机号重复");
          return;
        }
        if (res.data == -2) {
          alert("身份证重复");
          return;
        }
        alert("添加成功");
        router.push("/memberList");
      })
      //发送网络请求失败时调用的函数 相当于Ajax
      .catch((arr) => {
        console.log(arr);
      });
  };
  </script>
  
  <style scoped></style>
  